<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>后台管理系统</title>
  <link rel="stylesheet" href="/css/layui.css">
  <link rel="stylesheet" href="/css/header.css">
  <script src="/layui.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">区域论坛系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
          <!-- 移动端显示 -->
          <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
            <i class="layui-icon layui-icon-spread-left"></i>
          </li>
          
          <li class="layui-nav-item layui-hide-xs "><a href="/admin">文章管理</a></li>
          <li class="layui-nav-item layui-hide-xs layui-this"><a href="">用户管理</a></li>
          
        </ul>
        <ul class="layui-nav layui-layout-right list">
          <li style="line-height: 60px;">欢迎您：<span id="username"></span><a href="/admin/logout" style="color: rgb(0,150,136);">退出</a></li>
          <script>
            document.getElementById('username').innerHTML = sessionStorage.admin
          </script>
       
          
        </ul>
      </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-this">
            <a href="javascript:;">
                用户列表
            </a>
        </li>
        <!-- <li class="layui-nav-item">
            <a href="/admin/articleList">
                查看文章列表
            </a>
        </li> -->
        
        
        
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
        
        <table class="layui-hide" id="demo" lay-filter="test" lay-size="lg"></table>
  



        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="disable">禁用/恢复</a>
          </script>
    </div>
  </div>
  

</div>
<script>
    layui.use(['layedit','jquery'], function(){
      var layedit = layui.layedit;
        var $ = layui.jquery;
        var table = layui.table;
         //执行一个 table 实例
        table.render({
            elem: '#demo'
            ,height: 420
            ,url: '/admin/user/getAll' //数据接口
            ,title: '用户表'
            ,height:'800'
            ,page: true //开启分页
            ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,totalRow: true //开启合计行
            ,cols: [[ //表头
            {type: 'space', fixed: 'left'}
            ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
            ,{field: 'username', title: '用户名'}
            ,{field: 'msg', title: '用户简介'}
            ,{field: 'create_time', title: '时间',templet:function(item){
              return new Date(parseInt(item.create_time)).toLocaleString()
            }}
            ,{field: 'status', title: '用户状态',templet:function(item){
              return item.status == 1?'<span style="color:green;">正常</span>':'<span style="color:red;">已停用</span>'
            }}
            ,{fixed: 'right', align:'center',title:'操作',toolbar:"#barDemo"}
            ]]
        });

        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
        ,layEvent = obj.event; //获得 lay-event 对应的值
        if(layEvent === 'disable'){
          if(data.id === 0){
            layer.msg("不能对管理员操作")
          }else{
            $.post({
              url:`/admin/user/editStatus`,
              data:{
                status:data.status==0?1:0,
                id:data.id
              },
              success:function(res){
                if(res.code === 0){
                  layer.msg("操作成功")
                  table.reload("demo",{
                  url:'/admin/user/getAll'
                })
                }else{
                  layer.msg("操作失败，请检查网络")
                }
              }
            })
          }
        }
      });
  


   
    });
    </script>
<script>

</script>
</body>
</html>